import './orderManage.less';
import { View, ScrollView, Text } from '@tarojs/components'
import Taro from '@tarojs/taro';
import NavigationBar from '../../NavigationBar/NavigationBar';
import NavigationPlace from '../../NavigationBar/NavigationPlace';
import '../../fonts/remixicon.less';
import { useState ,useEffect} from 'react';
import http from '../../http/http';
function orderManage() {
    

    useEffect(()=>{
        myOrder();
    },[])

    const data = ['我的订单', '待付款', '待发货', '待收货', '已完成', '已失效'];
    //查询我的订单
    const [data2,setData2]=useState([]);
    const myOrder = () => {
        http({
            url: '/huangying/c_order',
            method: "get",
        }).then((res) => {
        res.data.data.forEach(v=>{
            res.data.data1.forEach(v2=>{
               if(v.order_id==v2.order_id){
                    v.num=v2.num;
                    v.actual_payment=v.sall_num*v.sell_price
               }
            })
        })
            setData2(res.data.data);

            console.log(res.data)
        })
    }
    //跳转到我的
    const toMine = () => {
        Taro.switchTab({
            url: '/pages/mine/mine'
            
          })
    }
    //设置点击后添加的样式
    const [active, setActive] = useState(0);
    // 跳转到相应的页面的方法
    const clickOrder = (v,a) => {
        console.log(v)
        setActive(a);
        Taro.navigateTo({
            url: '/pages/orderCheck/orderCheck?name='+v,
            success: function (res) {
              // 通过eventChannel向被打开页面传送数据
              res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
            }
          })
        
    }

    return (
        <View className="order">
            {/* 适配顶部导航栏 */}
            <NavigationBar
                canBack={() => toMine}
                navigationTitle='订单管理'
                button={true}
                buttonIconType='ri'
                buttonIcon='arrow-left-s-line'
                buttonIconSize='30px'
                buttonIconColor='#ffffff'
                buttonBGC='#00000050'
            ></NavigationBar>
            <NavigationPlace></NavigationPlace>
            {/* 导航 */}
            <View className="nav">
                <ScrollView
                    className='scrollview'
                    scrollX={true}
                    enableFlex={true}
                >
                    {data.map((v, i) => {
                        return (
                            <Text className={active == i ? 'active' : ''} onClick={() => clickOrder(v,i)}>{v}</Text>
                        )
                    })}
                </ScrollView>
                {/* 内容 */}
                {data2.map((v, i) => {
                    return (
                        <View className="con" >
                            <View>
                                <image src={v.image_url}></image>
                            </View>
                            <View className="con_1">
                                <view className="con_2">
                                    <Text>商品名称：{v.name}</Text>
                                    <Text>数量：{v.num}</Text>
                                    <Text className="t_1">实付: {v.actual_payment}</Text>
                                </view>
                                <view className="con_2 t-r">
                                    <Text>{v.send_goods_time}</Text>
                                    <Text className="t_2">{v.state}</Text>
                                </view>
                            </View>
                        </View>
                    )
                })}

            </View>
        </View>

    )

}

export default orderManage;